<template>
  <div class="estimate">
    <div class="text">
      <span>网友点评（339）</span>
      <div class="star">
        <img src="../../../assets/style/iconfont/star.svg" alt>
        <img src="../../../assets/style/iconfont/star.svg" alt>
        <img src="../../../assets/style/iconfont/star.svg" alt>
        <img src="../../../assets/style/iconfont/star-gray.svg" alt>
        <p style="float:right">4</p>
      </div>
    </div>

    <div class="user">
      <div class="user_pic">
        <img src="../../../assets/style/iconfont/user.svg" alt>
      </div>
      <div class="user_info">
        <div class="user_name">bangbangbang</div>
        <div class="user_like">
          <img src="../../../assets/style/iconfont/star.svg" alt>
          <img src="../../../assets/style/iconfont/star.svg" alt>
          <img src="../../../assets/style/iconfont/star.svg" alt>
          <img src="../../../assets/style/iconfont/star.svg" alt>
          <img src="../../../assets/style/iconfont/star.svg" alt>
        </div>
      </div>
      <div
        class="date"
        style="font-size:.32rem;margin-top:.3rem;margin-right:.3rem;color:gray;display:block;float:right;"
      >
        <p>4月11日</p>
      </div>
    </div>

    <div
      class="comment"
      style="margin:.3rem .3rem 0 .3rem;font-size:.3rem;line-height:.5rem;text-align:justify;border-bottom:solid .01rem gray;"
    >
      <p>骨头虽然肉不多，但是啃起来也很过瘾。鸭抓抓很糯，也很入味，川渝风十足 。还有小吃可以自取哦，总之性价比高 味道也不错 推荐。服务态度也可以，上菜很快。中午去得比较早，没有等位就之前吃啦。 #番茄一把骨# #炭火糯香鸭掌# #爆米花#</p>
      <img src="../../../assets/style/iconfont/demo/1.jpg" alt>
      <img src="../../../assets/style/iconfont/demo/2.jpg" alt>
      <img src="../../../assets/style/iconfont/demo/3.jpg" alt>
    </div>

    <div class="user">
      <div class="user_pic">
        <img src="../../../assets/style/iconfont/people.svg" alt>
      </div>
      <div class="user_info">
        <div class="user_name">hallo</div>
        <div class="user_like">
          <img src="../../../assets/style/iconfont/star.svg" alt>
          <img src="../../../assets/style/iconfont/star.svg" alt>
          <img src="../../../assets/style/iconfont/star.svg" alt>
          <img src="../../../assets/style/iconfont/star.svg" alt>
          <img src="../../../assets/style/iconfont/star.svg" alt>
        </div>
      </div>
      <div
        class="date"
        style="font-size:.32rem;margin-top:.3rem;margin-right:.3rem;color:gray;display:block;float:right;"
      >
        <p>5月12日</p>
      </div>
    </div>

    <div
      class="comment"
      style="margin:.3rem .3rem 0 .3rem;font-size:.3rem;line-height:.5rem;text-align:justify;border-bottom:solid .01rem gray;"
    >
      <p>过年前夕的时候去吃的，没有规定吃的时间～态度还是多不错的……一直在它家吃 ～开了很多年了 ……服务态度我觉得比人民食堂好至少不得规定吃好久嘛～本来聚会吃饭 吃开^_^</p>
      <img src="../../../assets/style/iconfont/demo/4.jpg" alt>
      <img src="../../../assets/style/iconfont/demo/5.jpg" alt>
    </div>

    <div class="more">
      <a href>
        <p>查看全部339条评价</p>
        <img src="../../../assets/style/iconfont/right.svg" alt>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: "FastFoodComment.vue"
};
</script>

<style scoped>
.estimate {
  margin-bottom: 0.2rem;
  /* border-bottom: solid .35rem  */
}
.text {
  content: 80%;
  width: 100%;
  overflow: hidden;
  /* float: left; */
  height: 1rem;
  border-bottom: solid 0.02rem rgb(226, 220, 220);
  margin-bottom: 0.2rem;
}
.text span {
  float: left;
  color: #333;
  font-size: 0.36rem;
  margin-left: 0.3rem;
  margin-top: 0.2rem;
}
.text .star {
  width: 4rem;
  /* margin-left: .3rem; */
  float: right;
}
.text .star img {
  width: 0.5rem;
  /* float: right; */
  margin-top: 0.18rem;
}
.text .star p {
  width: 0.5rem;
  float: left;
  font-size: 0.4rem;
  margin: 0.23rem 0.4rem 0 0;
  color: orange;
}
.user {
  height: 1.5rem;
}
.user_pic {
  float: left;
  display: block;
  margin-left: 0.3rem;
  margin-top: 0.2rem;
}
.user_pic img {
  width: 1rem;
  border: solid 0.03rem rgb(18, 190, 167);
  border-radius: 0.3rem;
}
.user_info {
  width: 5rem;
  display: block;
  float: left;
  margin-left: 0.3rem;
  margin-top: 0.2rem;
}
.user_info .user_name {
  font-size: 0.4rem;
  color: rgb(22, 172, 97);
  display: block;
  float: left;
  padding-bottom: 0.15rem;
  padding-right: 3rem;
}
.user_info .user_like {
  /* width: 100%; */
  display: block;
  float: left;
}
.user_info .user_like img {
  width: 0.5rem;
}
.comment img {
  width: 30%;
  height: 2.2rem;
  margin: 0.2rem 0.2rem 0.3rem 0;
}
.more {
  width: 95%;
  height: 1.3rem;
  margin-left: 0.3rem;
  /* border-bottom: solid .4rem  rgb(243, 241, 241); */
}
.more p {
  float: left;
  color: rgb(26, 204, 189);
  font-size: 0.3rem;
  margin: 0.35rem 0;
}
.more img {
  width: 0.45rem;
  float: right;
  margin-top: 0.3rem;
}
</style>
